<template>
  <div id="record">
    <!-- 弹框 -->
<div class="content-detail" v-if="detail">
      <div class="detail-box">
        <div class="detail-title">
          <HelloWorld :mes="title"></HelloWorld>
        </div>
        <div class="close1" @click="close">
          <img src="../../../public/imgs/关闭.png" alt="" />
        </div>
        <div class="detail-item">
          
            <div class="problem_name">
             
            <h1>{{ index_data.name }}</h1>
            </div>

           <div class="text">
            <p>{{ index_data.content }}</p>
           </div>
          
        </div>
      </div>
    </div>

    <div class="title">
      <div>重点问题</div>
      <div>回复内容</div>
      <div>状态</div>
    </div>
    <div class="content">
      <el-scrollbar
        class="scroll-container"
        ref="scrollRef"
        @mouseenter="stopScroll"
        @mouseleave="startScroll"
      >
        <div v-for="item in data" :key="item.id" class="scroll_box">
            <div class="problem">{{ item.name }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="state" @click="on_record(item)">
            <p>已回复</p>
            <img src="../../../public/imgs/sadsasadsa.png" alt="" />
            <span>查看详情</span>
          </div>
        </div>
      </el-scrollbar>
    </div>


  </div>
</template>

<script>
import HelloWorld from "../HelloWorld.vue";
export default {
  data() {
    return {
      detail:false,
      title:'问题详情',
      timer: null, //滚动定时器
      SCROLL_SPEED: 2, // 每次滚动的像素数，可以根据需要调整
      data: [],
      index_data:{}
    };
  },
  components: {
      HelloWorld,
    },
  methods: {
    // 自动滚动
    startScroll() {
      
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        // 获取滚动容器
        const container = document.querySelector(".el-scrollbar__wrap");
        // 判断是否已滚动到底部
        if (
          container.scrollHeight -
            (container.scrollTop + container.clientHeight) <=
          1
        ) {
          // 滚动到顶部
          container.scrollTop = -40;
        } else {
          // 向下滚动
          container.scrollTop += this.SCROLL_SPEED;
        }
      }, 30); // 根据需要调整滚动间隔
    },
    // 停止滚动
    stopScroll() {
      console.log(11);
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    // 手动拖拽
    enableDrag() {
      const container = document.querySelector(".el-scrollbar__wrap");
      if (!container) {
        return;
      }
      let isDown = false;
      let startY, scrollTop;
      container.addEventListener("mousedown", (e) => {
        isDown = true;

        startY = e.pageY;
        scrollTop = container.scrollTop;
        container.style.cursor = "grabbing";
      });

      container.addEventListener("mouseleave", () => {
        isDown = false;
        container.style.cursor = "grab";
      });

      container.addEventListener("mouseup", () => {
        isDown = false;
        container.style.cursor = "grab";
      });

      container.addEventListener("mousemove", (e) => {
        const content_box = document.querySelector(".content");
        const scrollbar__view = document.querySelector(".el-scrollbar__view");
        if (!isDown) return;
        const Y = e.pageY;
        if (Y + container.scrollTop - startY <= 0) return;
        e.preventDefault();
        container.scrollTop = Y + container.scrollTop - startY;
      });
    },
    async get_record() {
      try {
        let { data } = await this.$axios.post("/api/survey/keynote");
        this.data = data.data;
      } catch (error) {
        console.log(error);
      }
    },
    on_record(item){
      this.detail = true;
     
        this.index_data=item
        this.stopScroll();
        
    },
    // getCharts(text) {
    //     this.textword = text;
    //     this.detail = true;
        
    //   },
      close() {
        this.detail = false;
        // this.timer=null
        this.startScroll();
      },
  },
  created() {
    this.get_record();
  },
  mounted() {
    this.startScroll();
    this.enableDrag();
  },
  unmounted() {
    this.stopScroll();
  },
};
</script>

<style lang="scss" scoped>
#record {
  width: 506px;
  .title {
    height: 32.84;
    display: flex;
    justify-content: space-between;
    color: #03cde6;
    border-bottom: 1px solid #1c2949;
    padding: 0 34px 10px;
  }

  .content {
    height: 349px;
    position: relative;
    .el-scrollbar {
      height: 100%;
    }
    .scroll_box {
      display: flex;
      flex-direction: row;
      align-content: space-between;
      color: #b9e8ff;
      text-align: left;

      font-size: 12px;

      user-select: none;

      div {
        height: 87px;
        padding: 8px 4px;
        box-sizing: border-box;
      }
      .problem {
        width: 167px;
        overflow: hidden;
        display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
        

      }
      .content {
        width: 243px;
        overflow: hidden;
        display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
      }
      .state {
        width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        p {
          color: #03cde6;
        }
        img {
          text-align: right;
          width: 20px;
          height: 25px;
        }
        span {
          color: #fff;
        }
      }
    }
  }
  .content .scroll_box:nth-child(even) {
    background: #03cde612;
  }
  .details{

  }
}
 // 弹框
 .content-detail {
    position: absolute;
    top: -589px;
    left: -1325px;
    width: 1920px;
    height: 1080px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }
  
  .detail-box {
    width: 1420px;
    // height: auto;
    height: 900px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("../../../public/imgs/bg2.png");
    background-size:100% 100%;
    z-index: 100;
    box-sizing: border-box;
    padding: 20px 40px;
  }

  .detail-item {
    display: flex;
    height: 762px;
    flex-direction: column;
   
    box-sizing: border-box;
    color: #b9e8ff;
    .problem_name{
      border-bottom: 1px solid #1c2949;
      padding-bottom: 20px;
      h1{
        line-height: 40px;
      }
    }
    .text{
      height: 650px;
      padding: 0px 20px 40px;
      overflow-y: scroll;
    // -ms-overflow-style:none;
    // scrollbar-width:none;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
      p{
      text-align: left;
      font-size: 18px;
      line-height: 28px;
      overflow-y: scroll;
      -ms-overflow-style:none;
      scrollbar-width:none;
    
      padding: 10px 5px;
      text-indent: 2em;
    }
    }
    
  }

  .close1 {
    font-size: 24px;
    color: #f30;
    text-align: right;
    padding-right: 20px;
    position: absolute;
    top: 70px;
    right: 45px;
    z-index: 10;
  }
</style>